import axios from 'axios'
window.addEventListener('load', function () {
    const search_con = this.document.querySelector('.search-con')
    const search_ipt = this.document.querySelector('.header-top-left .search input')
    const icon_search = search_ipt.previousElementSibling
    const main = this.document.querySelector('#container .main')
    const changBg = this.document.querySelector('.header-top-right .operate div:nth-child(2)')
    const clock = this.document.querySelector('.main-content .share .tools-right i')
    const clockShow = this.document.querySelector('.main-content .share .clock')
    const share = this.document.querySelector('.main-content .share')
    const slide = main.children[0]
    const goTop = this.document.querySelector('.hot .goTop')
    search_ipt.addEventListener('focus', function () {
        search_con.style.display = "block"
        icon_search.style.color = "orange"
    })
    search_ipt.addEventListener('blur', function () {
        search_con.style.display = "none"
        icon_search.style.color = ""
    })

    changBg.addEventListener('click', function () {
        this.classList.toggle('icon-yueliang')
        if (this.classList.contains('icon-yueliang')) {
            slide.style.backgroundColor = 'black'
        } else {
            slide.style.backgroundColor = ''
        }
        // 这里自己找需要变黑的背景类名即可
    })


    clock.addEventListener('click', function () {
        clockShow.style.display = 'block'
        share.style.height = 200 + 'px'
        clockShow.style.display = 'flex'
    })
    const closeClock = clockShow.querySelector('.close')
    closeClock.addEventListener('click', function () {
        clockShow.style.display = 'none'
        share.style.height = 148 + 'px'
    })



    this.window.addEventListener('scroll', function () {
        if (this.window.pageYOffset > 0) {
            goTop.style.display = 'block'
            goTop.addEventListener('click', function () {
                window.scrollTo(0, 0)
            })
        } else {
            goTop.style.display = 'none'
        }
    })

    const hotlist = this.document.querySelector('.hot-list')
    const refresh = this.document.querySelector('.hot-top .icon-shuaxin')
    // 获取热搜
    axios.defaults.baseURL = 'https://www.fastmock.site/mock/e190dfd2c2243661705bbe24d1d0ed3f/api'
    axios({
        url: '/hotsearch',
        method: "get",
        params: {}
    }).then(res => {
        function sorts(val) {
            return function (obj1, obj2) {
                let n1 = obj1[val]
                let n2 = obj2[val]
                if (!isNaN(Number(n1)) && !isNaN(Number(n2))) {
                    n1 = Number(n1)
                    n2 = Number(n2)
                }
                if (n1 < n2) {
                    return 1
                } else if (n1 > n2) {
                    return -1
                } else {
                    return 0
                }
            }
        }
        let obj = res.data.hotsearch.sort(sorts('number'))
        render(obj)
        refresh.addEventListener('click', function () {
            // render(obj)
            location.reload()
        })
    }).catch(error => {
        console.log(error);
    })
    // 封装渲染函数
    function render(arr) {
        let str = ''
        arr.forEach((item, i) => {
            const { title, number, icon } = item
            str += ` <li>
            <div class="left">
              <span>${i + 1}</span>
              <span>${title}</span>
              <span>${number}万</span>
            </div>
            <div class="right">${icon}</div>
          </li>`
        })
        hotlist.innerHTML = str
    }

    // 主页面数据获取
    const mainInfo = this.document.querySelector('.main-content-body')
    axios({
        url: '/article',
        method: 'get'
    }).then(res => {
        // console.log(res);
        // 监听当前数据是否显示完毕，在现实下一次请求数据
        this.window.addEventListener('scroll', function (e) {
            let timer = null
            let start = new Date()
            return function(){
                let current=new Date()
                if(current-start>=2000){
                    timer=setTimeout(function(){
                        renderVideo(videoInfo)
                    },500)
                    start=current
                }
            }
        }())
        let videoInfo = res.data.article.splice(0, 66)
        
        renderVideo(videoInfo)
    })

    function renderVideo(arr) {
        let str = ''
        arr.forEach(item => {
            const { imgUrl, name, sign, content, dateTime, give, share, message } = item
            str += `<div>
            <div class="main-content-body-header">
              <div class="left">
                <div class="avatar">
                  <img src="${imgUrl}" alt="">
                  <div class="mask"></div>
                  <i class="iconfont icon-renzheng"></i>
                </div>
                <div class="info">
                  <div class="info-top">
                    <h4>${name}</h4>
                    <span>
                      <i class="iconfont icon-huangguan"></i>
                      <a href="">
                        <img src="https://h5.sinaimg.cn/upload/106/1683/2022/03/18/feed_icon_chuntian_default.png"
                          alt="你好春天" title="你好春天">
                      </a>
                    </span>
                  </div>
                  <div class="info-bottom">
                    <a href="">${dateTime}</a>
                    <span>来自</span>
                    <span>${sign}</span>
                  </div>
                </div>
              </div>
              <div class="right">
                <i class="iconfont icon-xiajiantou"></i>
              </div>
            </div>
            <div class="main-content-body-article">
              【自定义起名】<a href="">#男子用500条轮胎雕出12生肖兽首#</a>
              ${content}
              <a href="">@山海视频</a> <a href="">${name}的微博视频</a> ​​​
            </div>
            <div class="video">
              <video
                src=""
                controls poster="${imgUrl}"></video>
            </div>
            <div class="footer">
              <div class="iconfont icon-fenxiang">
                ${share}
              </div>
              <div class="iconfont icon-liuyan">
                ${give}
              </div>
              <div class="iconfont icon-dianzan">
                ${message}
              </div>
            </div>
          </div>`
        })
        mainInfo.innerHTML = str
    }

})